
body {
  padding: 4.5rem;
  margin: 0;
  background: #ebbd92;
  background: linear-gradient(90deg, #ebbd92 0, #a96aa2 58%);
}

/* 1. (回顾)1rem = 16px */
.card {
    width: 400px;
    height: auto;
    padding: 2rem;
    border-radius: 1rem;
  }
  
  .card-title {
    margin-top: 0;
    margin-bottom: .5rem;
    font-size: 1.2rem;
  }
  
  p, a {
    font-size: 1rem;
  }
  
  a {
    color: #4d4ae8;
    text-decoration: none;
  }

  .card {
    /* ... 其他css属性 */
    background: rgba(255, 255, 255, .7);

    /* 2. "-webkit" ->浏览器私有前缀(针对比如：Chrome浏览器...) */
    -webkit-backdrop-filter: blur(5px);

    /* 3. 主要看点属性：backdrop-filter */
    /* →它对元素 "后面的所有内容" 都会产生影响，但不会影响元素本身 */
    backdrop-filter: blur(5px);
  }

  .bottom-img {
    position: absolute;
    width: 300px;
    top: .10rem;
    left: .5rem;
  }
  
  
  